<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        
    </div>
    <button onclick="add100()">add 1000</button>
    <button onclick="add1000Chunk()">add 1000 chunk</button>
</body>
<script>
    function add100() {
        for(var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.innerHTML = i;
            document.getElementById('test').appendChild(div);
        }
    }

    function add1000Chunk() {
        var timeChunk = function(ary, fn, count) {
            var obj,
                t;
            var len = ary.length;

            var start = function() {
                for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                    var obj = ary.shift();
                    fn(obj);
                }
            }
            return function() {
                t = setInterval(function() {
                    if (ary.length === 0) {
                        return clearInterval(t);
                    }
                    start();
                }, 200);
            }
        }

        var ary = [];
        
        for(var i = 1; i <= 1000; i++) {
            ary.push(i);
        }

        var renderFriendList = timeChunk(ary, function (n) {
            var div = document.createElement('div');
            div.innerHTML = n;
            document.getElementById('test').appendChild(div);
        }, 8);

        renderFriendList();
    }
</script>
</html>